<template>
   <div class="mycontent-main">
       <el-form ref="form" :model="form" label-width="80px">
            <el-form-item label="门店">
                <el-select v-model="form.fra" value-key="fraid" placeholder="请选择门店">
                    <el-option 
                        v-for=" item in allfra" 
                        :label="item.name"
                        :key="item.fraid"
                        :value="item">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="桌号">
                <!-- <el-input v-model="form.number" value="allTags"></el-input> -->
                <el-tag 
                   :key="tag"
                   v-for="tag in allTags"
                   closable
                   :disable-transitions="false"
                   @close="handeClose(tag)"
                   type="primary">
                   {{tag}}
                </el-tag>
                <el-input
                    class="input-new-tag"
                    v-if="inputVisible"
                    v-model="inputTag"
                    ref="saveTagInput"
                    size="small"
                    @keyup.enter.native="handleInputConfirm"
                    @blur="handleInputConfirm"
                ></el-input>
                <el-button v-else class="button-new-tag" size="small" @click="showInput" > +NEW </el-button>
            </el-form-item>
            <el-form-item label="类型">
                <el-select v-model="form.qrcodetype"  placeholder="请选择二维码类型">
                    <el-option 
                        v-for=" item in qrcodetype" 
                        :label="item.description"
                        :key="item.typeid"
                        :value="item.typeid"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">立即创建</el-button>
                <el-button>取消</el-button>
            </el-form-item>
            
        </el-form>
   </div>
</template>

<script>
export default {
  name:"operationData",
  data(){
      return {
        form: {
            fra:{
                fraid:'',
                name:''
            },
            number:[],
            qrcodetype:'',
            },
        ceshi:"",
        allfra:[
            {fraid:"12312",name:"sadasd"},
            {fraid:"22222",name:"222dasd"},
            {fraid:"333333",name:"333dasd"},
        ],
        allTags:['标签一', '标签二', '标签三'],
        inputVisible:false,
        inputTag:'',
        qrcodetype:[
            {typeid:"1",description:"bsJDHbscSDkbv"},
            {typeid:"2",description:"四渡赤水的次数的传输"},
            {typeid:"3",description:"阿森松岛沉声道城市的"},
        ]
      }
  },
  methods:{
      handeClose(tag){
          this.allTags.splice(this.allTags.indexOf(tag),1);
      },
      showInput(){
          this.inputVisible = true;
          this.$nextTick( _ => {
              this.$refs.saveTagInput.$refs.input.focus();
          });
      },
      handleInputConfirm(){
          //this.allTags.push(inputTag)
        //   console.log(inputTag)
          let inputTag = this.inputTag;
          if( inputTag ){
              this.allTags.push(inputTag);
          }
          this.inputVisible = false;
          this.inputTag = '';
      },
      onSubmit(){
          console.log(this.form);
          console.log(this.allTags);
      }
  }
}
</script>

<style scoped>
    .mycontent-main{
        position: absolute;
        top:20px;
        left:20px;
    }
    .el-tag + .el-tag {
        margin-left: 10px;
    }
    .button-new-tag {
        margin-left: 10px;
        height:22px;
        line-height: 20px;
        padding-top: 0;
        padding-bottom: 0;
        border: 1px solid #82c5f1;
        color: #82c5f1;
    }
    .input-new-tag {
        width: 90px;
        margin-left: 10px;
        vertical-align: bottom;
    }
    .mycontent-title{
        width:100%;
        height: 40px;
        font-size: 16px;
        line-height: 20px;
        border-bottom: 1px solid #ddd;
    }
</style>

